<script module lang="ts">
    import { defineMeta } from "@storybook/addon-svelte-csf";
    import Icon from "@iconify/svelte";
    import Slider from "./Slider.svelte";
    import Space from "../Space/Space.svelte";
    import Button from "../Button/Button.svelte";

    const { Story } = defineMeta({
        title: "Components/Form/Slider",
        component: Slider,
        tags: ["autodocs"],
        argTypes: {},
        args: {},
    });
</script>

<Story name="Default">
    {#snippet template(args)}
        <Slider style="margin-top: 50px" />
    {/snippet}
</Story>

<Story name="Range">
    {#snippet template(args)}
        <Slider range value={[30, 70]} style="margin-top: 50px" />
    {/snippet}
</Story>

<Story name="Disabled" args={{ disabled: true }}>
    {#snippet template(args)}
        <Slider {...args} style="margin-top: 50px" />
        <Slider {...args} range value={[30, 70]} />
    {/snippet}
</Story>

<Story name="Step">
    {#snippet template(args)}
        <Space dir="v">
            <Slider step={10} style="margin-top: 50px" />
            <Slider step={0.1} />
        </Space>
    {/snippet}
</Story>

<Story name="MinMax">
    {#snippet template(args)}
        <Space dir="v" style="margin-top: 50px">
            <Slider step={0.01} min={0.2} max={1} value={0.3} />
        </Space>
    {/snippet}
</Story>

<Story name="TipFormatter">
    {#snippet template(args)}
        <Slider
            style="margin-top: 50px"
            value={[30, 70]}
            range
            tipFormatter={(v: number) => {
                return v + "分";
            }}
        />
    {/snippet}
</Story>

<Story name="Marks">
    {#snippet template(args)}
        <Slider step={10} marks={{ 0: "0", 20: "20a", 50: "50" }} style="margin-top: 50px" />
    {/snippet}
</Story>
